<template>
	<view class="mainpadding">
		<view class="flexleft xiahuaxian">
			<view class="sanshier fonweight xiaohei zitikd">收货人</view>
			<input type="text" placeholder="请填写收货人姓名" v-model="name">
		</view>
		<view class="flexleft xiahuaxian margin_top">
			<view class="sanshier fonweight xiaohei zitikd">手机号码</view>
			<input type="number" placeholder="请填写收货人手机号" v-model="mobile">
		</view>
		<view class="flexbetween xiahuaxian margin_top">
			<view class="flexleft">
				<view class="sanshier fonweight xiaohei zitikd">所在地区</view>
				<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="请选择住址" popup-title="请选择地区"
					v-model="area" class="zdy">
					<input type="text" placeholder="请选择住址" disabled="" v-model="city_text">
				</uni-data-picker>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="flexleft xiahuaxian margin_top">
			<view class="sanshier fonweight xiaohei zitikd">详细地址</view>
			<input type="text" placeholder="街道、楼牌号等" v-model="address_detail">
		</view>
		<view class="flexbetween margin_top">
			<view class="sanshier fonweight xiaohei zitikd">设置默认地址</view>
			<u-switch v-model="value" activeColor="#1BA95B"></u-switch>
		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" @click="addaddress">保存</view>
			<view class="huibigbtntys margin_top2" v-if="listid" @click="deladdress">删除</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				address_detail: "",
				name: "",
				mobile: "",
				value: false,
				items: citys.data,
				city_text: "",
				province_id: "",
				city_id: "",
				area_id: "",
				listid: "",
			}
		},
		onLoad(options) {
			this.listid = options.id;
			if (this.listid) {
				uni.setNavigationBarTitle({
					title: "编辑收货地址"
				})
				this.dizhixq()
			} else {
				uni.setNavigationBarTitle({
					title: "新增收货地址"
				})
			}
		},
		methods: {
			deladdress() {
				httpRequest.modal('提示', '确认删除当前数据吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/user/deladdress', 'GET', {
							id: this.listid
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							}
						})
					}
				})
			},
			// 地址详情接口
			dizhixq() {
				let _this = this;
				httpRequest.request('/api/user/addressDetail', 'GET', {
					// 传参
					id: _this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.city_text = res.data.cityinfo
						this.province_id = res.data.province_id
						this.city_id = res.data.city_id
						this.area_id = res.data.area_id
						this.name = res.data.name
						this.mobile = res.data.mobile
						this.address_detail = res.data.address_detail
						if (res.data.status == 1) { //判断是否默认按钮
							this.value = true
						} else {
							this.value = false
						}
					}
				})
			},
			isMobile(value) { //手机号校验
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			addaddress() { //添加地址
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				let _this = this;
				let mobile = _this.mobile;
				if (_this.name == '') {
					uni.hideLoading()
					httpRequest.toast('请输入收货人名字');
					return false;
				}
				if (_this.mobile == "") {
					uni.hideLoading()
					httpRequest.toast('请输入收货人手机号');
					return false;
				}
				// if (!_this.isMobile(_this.mobile)) {
				// 	uni.hideLoading()
				// 	httpRequest.toast("手机号输入有误")
				// 	return false
				// }
				if (_this.area_id == "") {
					uni.hideLoading()
					httpRequest.toast('请选择地址');
					return false;
				}
				if (_this.address == "") {
					uni.hideLoading()
					httpRequest.toast('请输入详细地址');
					return false;
				}
				let data = {
					id: this.listid,
					name: _this.name,
					mobile: _this.mobile,
					address_detail: _this.address_detail,
					status: _this.value ? 1 : 0,
					province_id: _this.province_id,
					city_id: _this.city_id,
					area_id: _this.area_id
				}
				let url = "/api/user/editAddress"
				if (!this.listid) {
					delete data.id
					url = "/api/user/addAddress"
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				let area_text = [area[0].text, area[1].text, area[2].text];
				this.city_text = area_text.join("/")
				this.province_id = area[0].value;
				this.city_id = area[1].value;
				this.area_id = area[2].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zitikd {
		width: 200rpx;
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #1BA95B;
	}
</style>